// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component, toNative } from 'vue-facing-decorator'
import TableRender from '@/render/TableRender'
import ServeCompany from './serve-company/Index'
import RechargeAudit from './recharge-audit/Index'
import ClientAudit from './client-audit/Index'
import InvoiceUpload from './invoice-upload/Index'
import { getAuditCount } from '@/api/company'
import type { AuditCountDto } from '@/api/company/types'
import { TabPane, Tabs } from 'ant-design-vue'

@Component
export class ApprovalView extends TableRender {
    activeName = 'ticket'
    auditData = {} as AuditCountDto

    async getAuditCountData() {
        return await getAuditCount()
    }

    async onTabClick() {
        this.auditData = await this.getAuditCountData()
    }

    async onMounted() {
        this.auditData = await this.getAuditCountData()
    }

    renderLabel(title: string, count: number) {
        return (
            <div class="relative">
                <div>{title}</div>
                <div class="absolute -right-16px -top-8px bg-orange rounded-full text-xs px-2px text-white">
                    {count}
                </div>
            </div>
        )
    }

    render() {
        return (
            <Tabs v-model={this.activeName} type="card" onTabClick={this.onTabClick}>
                <TabPane
                    tab="派遣单位审批"
                    key="serveCompany"
                    v-slots={{
                        label: () => {
                            return (
                                <>
                                    {this.renderLabel(
                                        '派遣单位审批',
                                        (this.auditData.periodSvc ?? 0) +
                                            (this.auditData.dailySvc ?? 0)
                                    )}
                                </>
                            )
                        }
                    }}
                >
                    <ServeCompany />
                </TabPane>
                <TabPane
                    tab="充值审批"
                    key="recharge"
                    v-slots={{
                        label: () => {
                            return (
                                <>
                                    {this.renderLabel(
                                        '充值审批',
                                        (this.auditData.periodRe ?? 0) +
                                            (this.auditData.dailyRe ?? 0)
                                    )}
                                </>
                            )
                        }
                    }}
                >
                    <RechargeAudit />
                </TabPane>
                <TabPane tab="客户审批" key="client">
                    <ClientAudit />
                </TabPane>
                <TabPane
                    tab="上传发票"
                    key="ticket"
                    v-slots={{
                        label: () => {
                            return <>{this.renderLabel('上传发票', this.auditData.invoices ?? 0)}</>
                        }
                    }}
                >
                    <InvoiceUpload />
                </TabPane>
            </Tabs>
        )
    }
}

export default toNative(ApprovalView)
